import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import './DiscoverPage.css';
import './VideosPage.css';
import VideoCard from './VideoCard';

// 视频列表数据（扩展了更多视频）
const videoList = [
  {
    id: 1,
    avatar: '/6.jpg',
    username: '张三',
    likes: '7.9万',
    img: '/6.jpg',
    video: '/meinv.mp4',
    isFollow: false,
    category: ['美食', '推荐']
  },
  {
    id: 2,
    avatar: '/7.jpg',
    username: '张三',
    likes: '7.9万',
    img: '/7.jpg',
    video: '/meinv.mp4',
    isFollow: true,
    category: ['游戏', '推荐']
  },
  {
    id: 3,
    avatar: '/9.jpg',
    username: '张三',
    likes: '7.9万',
    img: '/10.jpg',
    video: '/meinv.mp4',
    isFollow: false,
    category: ['音乐', '推荐']
  },
  {
    id: 4,
    avatar: '/11.jpg',
    username: '张三',
    likes: '7.9万',
    img: '/11.jpg',
    video: '/meinv.mp4',
    isFollow: true,
    category: ['舞蹈', '推荐']
  },
  {
    id: 5,
    avatar: '/12.jpg',
    username: '张三',
    likes: '7.9万',
    img: '/12.jpg',
    video: '/meinv.mp4',
    isFollow: false,
    category: ['美食', '附近']
  },
  {
    id: 6,
    avatar: '/13.jpg',
    username: '张三',
    likes: '7.9万',
    img: '/13.jpg',
    video: '/meinv.mp4',
    isFollow: false,
    category: ['旅行', '附近']
  },
  {
    id: 7,
    avatar: '/14.jpg',
    username: '张三',
    likes: '7.9万',
    img: '/14.jpg',
    video: '/meinv.mp4',
    isFollow: true,
    category: ['时尚', '推荐']
  },
  {
    id: 8,
    avatar: '/6.jpg',
    username: '张三',
    likes: '7.9万',
    img: '/7.jpg',
    video: '/meinv.mp4',
    isFollow: false,
    category: ['宠物', '搞笑']
  },
  {
    id: 9,
    avatar: '/9.jpg',
    username: '时尚达人',
    likes: '5.2万',
    img: '/10.jpg',
    video: '/meinv.mp4',
    isFollow: false,
    category: ['时尚', '推荐']
  },
  {
    id: 10,
    avatar: '/11.jpg',
    username: '运动博主',
    likes: '8.1万',
    img: '/12.jpg',
    video: '/meinv.mp4',
    isFollow: true,
    category: ['体育', '健身']
  },
  {
    id: 11,
    avatar: '/13.jpg',
    username: '美食小当家',
    likes: '9.7万',
    img: '/14.jpg',
    video: '/meinv.mp4',
    isFollow: false,
    category: ['美食', '推荐']
  },
  {
    id: 12,
    avatar: '/6.jpg',
    username: '科技评测',
    likes: '4.3万',
    img: '/7.jpg',
    video: '/meinv.mp4',
    isFollow: true,
    category: ['科技', '推荐']
  },
  {
    id: 13,
    avatar: '/9.jpg',
    username: '插画师',
    likes: '3.5万',
    img: '/10.jpg',
    video: '/meinv.mp4',
    isFollow: false,
    category: ['时尚', '推荐']
  },
  {
    id: 14,
    avatar: '/11.jpg',
    username: '街头魔术',
    likes: '6.7万',
    img: '/12.jpg',
    video: '/meinv.mp4',
    isFollow: true,
    category: ['搞笑', '附近']
  },
  {
    id: 15,
    avatar: '/13.jpg',
    username: '亲子博主',
    likes: '4.8万',
    img: '/14.jpg',
    video: '/meinv.mp4',
    isFollow: false,
    category: ['宠物', '推荐']
  },
  {
    id: 16,
    avatar: '/6.jpg',
    username: '汽车达人',
    likes: '8.9万',
    img: '/7.jpg',
    video: '/meinv.mp4',
    isFollow: true,
    category: ['科技', '推荐']
  },
  {
    id: 17,
    avatar: '/9.jpg',
    username: '旅行博主',
    likes: '7.4万',
    img: '/10.jpg',
    video: '/meinv.mp4',
    isFollow: false,
    category: ['旅行', '推荐']
  },
  {
    id: 18,
    avatar: '/11.jpg',
    username: '健身教练',
    likes: '5.5万',
    img: '/12.jpg',
    video: '/meinv.mp4',
    isFollow: true,
    category: ['健身', '体育']
  },
  {
    id: 19,
    avatar: '/13.jpg',
    username: '舞蹈达人',
    likes: '9.2万',
    img: '/14.jpg',
    video: '/meinv.mp4',
    isFollow: false,
    category: ['舞蹈', '音乐']
  },
  {
    id: 20,
    avatar: '/6.jpg',
    username: '摄影师',
    likes: '6.3万',
    img: '/7.jpg',
    video: '/meinv.mp4',
    isFollow: true,
    category: ['旅行', '时尚']
  },
  {
    id: 21,
    avatar: '/9.jpg',
    username: '城市夜景',
    likes: '4.7万',
    img: '/10.jpg',
    video: '/meinv.mp4',
    isFollow: false,
    category: ['旅行', '推荐']
  },
  {
    id: 22,
    avatar: '/11.jpg',
    username: '手工艺人',
    likes: '3.2万',
    img: '/12.jpg',
    video: '/meinv.mp4',
    isFollow: true,
    category: ['时尚', '推荐']
  },
  {
    id: 23,
    avatar: '/13.jpg',
    username: '电竞主播',
    likes: '8.8万',
    img: '/14.jpg',
    video: '/meinv.mp4',
    isFollow: false,
    category: ['游戏', '推荐']
  },
  {
    id: 24,
    avatar: '/6.jpg',
    username: '街拍达人',
    likes: '5.9万',
    img: '/7.jpg',
    video: '/meinv.mp4',
    isFollow: true,
    category: ['时尚', '推荐']
  }
];

// 分类数据
const categories = [
  '推荐', '附近', '游戏', '音乐', '舞蹈', '美食', '旅行', '时尚', '宠物', '搞笑', '科技', '体育', '健身'
];

const VideosPage = () => {
  const navigate = useNavigate();
  const location = useLocation();
  
  // 获取从上一个页面传递的分类
  const initialCategory = location.state?.category || '推荐';
  
  // 找到分类的索引
  const categoryIndex = categories.findIndex(cat => cat === initialCategory);
  
  // 设置活动分类，如果没有找到匹配的则默认为0（推荐）
  const [activeCategory, setActiveCategory] = useState(categoryIndex !== -1 ? categoryIndex : 0);
  const [refreshing, setRefreshing] = useState(false);
  const [videos, setVideos] = useState(videoList);
  const [filteredVideos, setFilteredVideos] = useState([]);
  const [isGridView, setIsGridView] = useState(true); // 网格或列表视图的状态

  // 当分类切换时筛选视频
  useEffect(() => {
    const selectedCategory = categories[activeCategory];
    
    // 筛选符合当前分类的视频
    const newFilteredVideos = videos.filter(video => 
      video.category.includes(selectedCategory)
    );
    
    setFilteredVideos(newFilteredVideos);
  }, [activeCategory, videos]);

  // 处理刷新
  const handleRefresh = () => {
    setRefreshing(true);
    
    // 模拟刷新操作
    setTimeout(() => {
      // 随机打乱视频顺序
      const shuffledVideos = [...videos].sort(() => Math.random() - 0.5);
      setVideos(shuffledVideos);
      
      setRefreshing(false);
    }, 800);
  };

  // 返回上一页
  const handleBack = () => {
    navigate(-1);
  };
  
  // 切换视图模式
  const toggleViewMode = () => {
    setIsGridView(!isGridView);
  };
  
  // 跳转到短视频页面
  const goToShorts = () => {
    navigate('/shorts');
  };

  return (
    <div className="videos-page">
      {/* 头部导航栏 */}
      <div className="videos-header">
        <div className="back-button" onClick={handleBack}>
          <span>&#10094;</span>
        </div>
        <div className="page-title">推荐视频</div>
        <div className="view-toggle" onClick={toggleViewMode}>
          {isGridView ? '列表' : '网格'}
        </div>
      </div>
      
      {/* 分类选项卡 */}
      <div className="category-tabs">
        {categories.map((category, index) => (
          <div 
            key={index} 
            className={`category-tab ${index === activeCategory ? 'active' : ''}`}
            onClick={() => setActiveCategory(index)}
          >
            {category}
            {index === activeCategory && <div className="category-indicator"></div>}
          </div>
        ))}
      </div>
      
      {/* 内容区域 */}
      <div className="videos-content">
        {filteredVideos.length > 0 ? (
          <div className={isGridView ? "videos-grid" : "videos-list"}>
            {filteredVideos.map(video => (
              <div key={video.id} className="video-card-container" onClick={() => goToShorts()}>
                <VideoCard video={video} />
              </div>
            ))}
          </div>
        ) : (
          <div className="empty-content">
            <div className="empty-icon">🔍</div>
            <div className="empty-text">当前分类暂无视频</div>
          </div>
        )}
      </div>
      
      {/* 刷新按钮 */}
      <div className={`refresh-btn ${refreshing ? 'refreshing' : ''}`} onClick={handleRefresh}>
        {refreshing ? '↻' : '↻'}
      </div>
    </div>
  );
};

export default VideosPage; 